<template>
  <div class="login">
    <div class="logo">
      <img src="~assets/img/logo.svg" alt="my login img" />
    </div>
    <!-- 输入框 -->
    <div class="input-group">
      <input type="text" v-model="inputvalue" placeholder="请输入手机号" />
      <span @click="emptyinput($event)" v-if="inputvalue"
        ><img src="~assets/img/delete.svg" alt=""
      /></span>
    </div>

    <!-- 验证码 -->
    <div class="verify-group">
      <input type="text" v-model="verifyvalue" placeholder="验证码" />
      <span v-if="verifyvalue" style="right: 40%" @click="emptyverify($event)"
        ><img src="~assets/img/delete.svg" alt=""
      /></span>
      <button
        @click="getVerifyCode"
        :disabled="verifydisabled"
        :class="{ verifyactive: verifyActive }"
      >
        {{ this.btnTitle }}
      </button>
    </div>

    <!-- 登录按钮 -->
    <div class="log-btn">
      <button
        :disabled="logindisabled"
        :class="{ logactive: logActive }"
        @click="handlelogin()"
      >
        登录
      </button>
    </div>

    <!-- 用户协议 -->
    <div class="login-des">
      <label>
        <input
          type="checkbox"
          name="agreement"
          :checked="isChecked"
          @click="changeIsChecked"
        />
        <p>
          未注册手机号手机号登录后将自动生成账号，且代表你已经阅读并同意<span>《用户服务协议》</span>、<span
            >《隐私政策》</span
          >
        </p>
      </label>
    </div>

    <!-- 弹框 -->
    <div class="bounced" v-if="error">
      <div>{{ this.error }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      inputvalue: "",
      verifyvalue: "",
      // 最开始禁用
      verifydisabled: true,
      logindisabled: true,
      // 验证码样式verifyActive
      verifyActive: false,
      logActive: false,
      // 错误信息
      error: "",
      btnTitle: "获取验证码",

      isChecked: false,
    };
  },
  methods: {
    // 清空输入框
    emptyinput(e) {
      // console.log(e.target.parentNode.parentNode.childNodes[0].value);
      // e.target.parentNode.parentNode.childNodes[0].value = "";
      this.inputvalue = "";
    },
    emptyverify(e) {
      // e.target.parentNode.parentNode.childNodes[0].value = "";
      this.verifyvalue = "";
    },

    // 获取验证码
    getVerifyCode() {
      if (this.validatePhone()) {
        // 倒计时
        this.validateBth();
        // 发送请求
        this.$axios.post("/v1/captchas").then((res) => {
          // console.log(res);
        });
      }
    },
    validateBth() {
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.btnTitle = "获取验证码";
          this.verifyActive = true;
        } else {
          this.btnTitle = "已发送(" + time + "s)";
          this.verifydisabled = true;
          this.verifyActive = false;
          time--;
        }
      }, 1000);
    },
    validatePhone() {
      // 验证手机号码
      if (!/^1[345678]\d{9}$/.test(this.inputvalue)) {
        this.error = "请填写合法的手机号";
        setTimeout(() => {
          this.error = "";
        }, 2000);
        return false;
      } else {
        this.error = "";
        return true;
      }
    },
    handlelogin() {
      this.error = "";
      if(this.isChecked == false){
        this.error = "请勾选条款"
        setTimeout(() => {
          this.error = "";
        }, 2000);
        return
      }
      this.$axios
        .post("/v2/login", {
          username: this.inputvalue,
          password: "",
          captcha_code: this.verifyvalue,
        })
        .then((res) => {
          // console.log(res);
          // 校验并跳转
          if (this.verifyvalue == "111111") {
            localStorage.setItem("ele_login", true);
            this.$router.push("/");
          } else {
            this.error = "验证码错误";
          }
        })
        .catch((err) => {
          this.error = "验证码错误";
        });
    },
    changeIsChecked() {
      this.isChecked = !this.isChecked;
    },
  },
  watch: {
    // 如果 `inputvalue` 发生改变，这个函数就会运行
    inputvalue: function () {
      let oldinput = this.inputvalue.slice(0, -1);
      if (this.inputvalue.length > 11) {
        this.inputvalue = this.inputvalue.slice(0, 11);
      }
      if (this.inputvalue != Number(this.inputvalue)) {
        this.inputvalue = oldinput;
      }
      if (this.inputvalue.length == 11) {
        this.verifyActive = true;
        this.verifydisabled = false;
      } else {
        this.verifyActive = false;
        this.verifydisabled = true;
      }
      // if (this.verifyvalue.length >= 6 && String(this.verifyActive) == "true") {
      if (this.verifyvalue.length == 6 && this.inputvalue.length == 11) {
        this.logActive = true;
        this.logindisabled = false;
      } else {
        this.logActive = false;
        this.logindisabled = true;
      }
    },
    verifyvalue: function () {
      let verifyinput = this.verifyvalue.slice(0, -1);
      if (this.verifyvalue.length > 6) {
        this.verifyvalue = this.verifyvalue.slice(0, 6);
      }
      if (this.verifyvalue != Number(this.verifyvalue)) {
        this.verifyvalue = verifyinput;
      }
      if (this.verifyvalue.length == 6 && this.inputvalue.length == 11) {
        this.logActive = true;
        this.logindisabled = false;
      } else {
        this.logActive = false;
        this.logindisabled = true;
      }
    },
  },
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: white;
}
.logo {
  text-align: center;
}
.logo img {
  width: 50%;
  margin-top: 30px;
  margin-bottom: 20px;
}
/* 输入框样式 */
.input-group,
.verify-group {
  width: 80%;
  margin: 0 auto;
  position: relative;
}
.input-group input,
.verify-group input {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px rgb(194, 193, 193) solid;
  caret-color: rgb(51, 151, 228);
  font-size: 16px;
  padding-left: 5px;
  margin-bottom: 10px;
}
.input-group input:focus,
.verify-group input:focus {
  outline: 0;
}

/* 输入框的删除 */
.input-group span,
.verify-group span {
  position: absolute;
  top: 15px;
  right: 0;
}
.input-group span img,
.verify-group span img {
  width: 13px;
}

/* 获取验证码按钮 */
.verify-group button {
  position: absolute;
  top: 10px;
  right: 0;
  width: 90px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid rgb(194, 193, 193);
  color: rgb(194, 193, 193);
  background-color: white;
  font-size: 14px;
}
/* 登录按钮 */
.log-btn {
  width: 80%;
  margin: 0 auto;
}
.log-btn button {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  border: 1px solid rgb(194, 193, 193);
  background-color: rgb(231, 231, 231);
}

/* 用户协议 */
.login-des {
  position: relative;
}
.login-des input {
  position: absolute;
  left: 9%;
}
.login-des p {
  display: inline-block;
  font-size: 12px;
  /* text-indent:24px; */
  line-height: 15px;
  width: 75%;
  position: absolute;
  left: 15%;
}
.login-des p span {
  color: rgb(51, 151, 228);
}
.verify-group .verifyactive {
  border: 1px solid rgb(51, 151, 228);
  color: rgb(51, 151, 228);
}
.log-btn .logactive {
  border: 1px solid rgb(51, 151, 228);
  background-color: rgb(51, 151, 228);
  color: white;
}

.bounced {
  position: relative;
  width: 150px;
  height: 35px;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  margin: 0 auto;
  border-radius: 10px;
}
.bounced div {
  line-height: 35px;
  color: white;
  text-align: center;
  font-size: 12px;
}
</style>